<template>
	<view>
		<s-layout navbar="custom" style="overflow-y: hidden !important;" onShareAppMessage tabbar="/pages/index/index"
		          title="IM">
			<view class="bg-main">
				<!-- 天气布局增量代码 -->
				<view class="weather">
					<view class="weather-top">
						<text class="weather-temp">18°C</text>
						<text class="weather-desc">多云转晴</text>
					</view>
					<view class="weather-icon">
						<view class="sun"></view>
						<view class="cloud"></view>
					</view>
					<view class="weather-bottom">
						<text class="weather-date">星期一 12/16</text>
						<text class="weather-uv">紫外线弱</text>
						<text class="weather-humidity">湿度 52%</text>
					</view>
					<view class="side-menu">
						<view class="menu-item" @click="sheep.$router.go('/pages/index/personSetting')">
							<image class="iconfont icon-user" src="https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/0424888b09edf14d9e8c8cd9cdb2d8d7acimage.png"></image>
							<text>我的</text>
						</view>
						<view class="menu-item" @click="sheep.$router.go('/pages/index/tips')">
							<image class="iconfont icon-user" src="https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04ac530d78f5614629950ed38a31fbe06eimage.png"></image>
							<text>秘籍</text>
						</view>
					</view>
				</view>

				<!-- 海报区域 -->
				<view class="poster-container">
					<view class="poster-bg bg-back"></view>
					<view class="poster-bg bg-middle"></view>
					<view class="poster-main">
						<!-- 占位图片 -->
						<image class="poster-img" src="https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/05/04854220fc674646f09b240734c79f54ceimage.png"></image>
						<view class="poster-info">
							<text class="poster-tag">精选少女妆</text>
							<text class="poster-steps">共9步</text>
							<text class="poster-time">45分钟</text>
						</view>
					</view>
				</view>

				<!--开始化妆-->
				<view class="login-btn primary-btn" @click="sheep.$router.go('/pages/index/startPlant')">
					开始化妆
				</view>

			</view>
		</s-layout>
	</view>
</template>

<script setup>
import {computed, reactive, ref} from 'vue';
import {onLoad, onPageScroll, onPullDownRefresh, onReachBottom} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import $share from '@/sheep/platform/share';
//#ifdef H5
import weixin from '@/sheep/libs/sdk-h5-weixin';
//#endif
const categoryList = [
	{
		name: '煤炉',
		icon: '/static/mercari.png',
		type: 0
	},
	{
		name: '骏河屋',
		icon: '/static/suruga.png',
		type: 1
	},
]

const bannerList = reactive([])

const state = reactive({
	platform: 0,
	platformList: [],
	categoryId: '1328',
	categoryName: '全部',
	bannerList: [],
	platformImg: [],
	noticeInfo: {},
	versionInfo: {},
	currentTab: 0,
	goodCategory: [
		{
			id: 1328,
			name: '精选好物',
			child: [
				{
					id: '1328',
					name: '全部跑腿商品'
				}
			]
		}
	],
	tabMapsStorage: [
		{
			name: '全部跑腿商品',
			value: -1,
			categoryId: 1328
		}
	]
})

const goodsCardRef = ref();

const goodsCard = {
	"data": {
		"mode": 1,
		"goodsFields": {
			"title": {
				"show": 1,
			},
			"subtitle": {
				"show": 1,
			},
			"price": {
				"show": 1,
			},
			"original_price": {
				"show": 1,
			},
			"sales": {
				"show": 1,
			},
			"stock": {
				"show": 0,
			}
		},
		"buyNowStyle": {
			// "mode": 1,
			// "text": "立即下单",
			// "color1": "#e16759",
			// "color2": "#f5796f",
			// "src": "\/storage\/decorate\/20221115\/4782356b4587dc4f4a218f2540a0bafc.png",
			// "right": '20rpx',
			// "bottom":"18rpx"
		},
		"tagStyle": {
			"show": 1,
			"src": "https://xiaozhan-shop.oss-cn-beijing.aliyuncs.com/2024/02/02708e08484a644ec69c24b02b92310a33mercari.png"
		},
		params: {
			orderField: 'sort',
			orderSort: 'asc'
		},
		"borderRadiusTop": 6,
		"borderRadiusBottom": 6,
		"space": 8
	},
	"style": {
		"background": {
			"type": "color",
			"bgImage": "",
			"bgColor": ""
		},
		"marginLeft": 8,
		"marginRight": 8,
		"marginTop": 0,
		"marginBottom": 10,
		"borderRadiusTop": 0,
		"borderRadiusBottom": 0,
		"padding": 0
	}
};

// 隐藏原生tabBar
uni.hideTabBar();

const template = computed(() => sheep.$store('app').template.home);

function onTabsChangeStorage(e) {
	console.log('onTabsChangeStorage', e)
	state.categoryId = e.categoryId;
	state.categoryName = e.name;
	goodsCardRef.value.getList(true)
}

function toInfo(it) {
	if (sheep.$helper.isRealEmpty(it.remark)) {
		return
	}
	sheep.$router.go('/pages/coupon/detail', {
		id: it.remark
	})
}

function indexNavTagChange() {

}

onLoad(async (options) => {
	sheep.$store('app').init();
	// #ifdef MP
	// 小程序识别二维码
	if (options.scene) {
		const sceneParams = decodeURIComponent(options.scene).split('=');
		options[sceneParams[0]] = sceneParams[1];
	}
	// #endif

	// 预览模板
	if (options.templateId) {
		sheep.$store('app').init(options.templateId);
	}

	// 读取 localStorage 是否登录
	let loginInfo = uni.getStorageSync('loginInfo');
	if (sheep.$helper.isRealEmpty(loginInfo)) {
		console.log('未登录，跳转登录页', loginInfo)
		// 未登录
		uni.navigateTo({
			url: '/pages/index/login'
		})
	}

	// 读取banner
	let res = await sheep.$api.order.channelList({type: 'banner_img'});
	console.log(res)
	state.bannerList = res;
	console.log('banner', state.bannerList)

	// 读取平台入口信息
	// const platformIconRes = await sheep.$api.order.channelList({ type: 'platform_icon_list' });
	// let data = platformIconRes[0];
	// console.log('platformIconResDictValue', data.dictValue)
	// state.platformList = JSON.parse(data.dictValue)
	// console.log(state.platformList, 'platform')

	// 读取最新通知
	let noticeRes = await sheep.$api.coupon.userCoupon(null);
	if (noticeRes.rows.length > 0) {
		state.noticeInfo = noticeRes.rows[0]
	}

	// 读取版本信息
	// let versionRes = await sheep.$api.order.channelList({type: 'version_content'});
	// if (versionRes.length > 0) {
	// 	state.versionInfo = versionRes[0]
	// }

	// 读取banner
	// let platformRes = await sheep.$api.order.channelList({type: 'platform_img'});
	// console.log(platformRes)
	// state.platformImg = platformRes;
	// console.log('platformRes', state.platformImg)

	// let storagePlatform = uni.getStorageSync('platform');

	let platform = 0

	/*	if (storagePlatform === 0 || storagePlatform === 1) {
			platform = storagePlatform
		} else {
			platform = 0
		}*/

	state.platform = platform

	// 请求推荐分类信息
	/*let category = await sheep.$api.category.list({
		parentId: 1328
	})
	category.forEach((item,index) => {
		let obj = {
			name: item.name,
			value: index,
			categoryId: item.id
		}
		state.tabMapsStorage.push(obj)
	})
	console.log(state.tabMapsStorage, 'state.tabMapsStorage')*/

	// 解析分享信息
	if (options.spm) {
		$share.decryptSpm(options.spm);
	}

	console.log(options.shareUserId)

	if (options.shareUserId !== undefined) {
		uni.setStorageSync('shareUserId', options.shareUserId)
	}

	// 解析公众号信息
	if (options.accountOpenId !== undefined) {
		uni.setStorageSync('accountOpenId', options.accountOpenId)
	}
	console.log(options.accountOpenId, '----------------->accountOpenId')

	// 进入指定页面(完整页面路径)
	if (options.page) {
		sheep.$router.go(decodeURIComponent(options.page));
	}
	// getCategoryList()
	//#ifdef H5
	// setOpenShare()
	//#endif
});
// onShareAppMessage((res) => {
// 	console.log(res)
// 	let shareData = {
// 		title: '邀请好友领取海量现金券!',
// 		desc: '我正在使用xxxApp，赶紧跟我一起来体验！',
// 		link: "https://mall.ichengle.top/uni/",
// 		imgUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png',
// 		path: '/pages/index/index?shareUserId=123456'
// 	}
// 	return {
// 		...shareData
// 	}
// });
// 下拉刷新
onPullDownRefresh(async () => {
	sheep.$store('app').init();
	/*let res = await sheep.$api.order.channelList({type: 'banner_img'});
	console.log(res)
	state.bannerList = res;
	console.log(state.bannerList)*/

	// 读取banner
	/*let platformRes = await sheep.$api.order.channelList({type: 'platform_img'});
	console.log(platformRes)
	state.platformImg = platformRes;
	console.log('platformRes', state.platformImg)*/

	setTimeout(function () {
		uni.stopPullDownRefresh();
	}, 800);
});
// 上拉加载更多
onReachBottom(() => {
	// 该事件必须申明,子组件才会触发该事件
})
onPageScroll(() => {
});
//#ifdef H5
// 微信h5分享；
function setOpenShare() {
	let currentUrl = location.href //获取当前页面链接

	let shareData = {
		title: '邀请好友领取海量现金券!',
		desc: '我正在使用xxxApp，赶紧跟我一起来体验！',
		link: "https://mall.ichengle.top/uni/",
		imgUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png'
	}
	console.log("更新分享", shareData)
	weixin.updateShareInfo(shareData);
}

//#endif
// 获取跑腿商品分类
function getCategoryList() {
	sheep.$api.category.list().then(res => {
		categoryList.value = res
	})
}

function switchStore(item) {
	// 弹出提示框
	uni.showModal({
		title: '提示',
		content: '是否切换到' + item.name + '平台',
		success: function (res) {
			if (res.confirm) {
				if (item.type === 1) {
					sheep.$helper.toast('骏河屋请联系客服下单')
				} else {
					uni.setStorageSync('platform', item.type)
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			} else if (res.cancel) {
				// console.log('用户点击取消');
			}
		}
	});
}
</script>

<style lang="scss" scoped>
.panel {
	display: flex;
	flex-direction: column;
	justify-content: left;
	width: 100%;
	background-color: #FFFFFF;
	//padding: 10rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	box-shadow: 1px 1px 20px #ececec;
	border-radius: 20rpx;


	.title {
		border-left: 5rpx solid #F39800;
		padding-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		margin: 10rpx;
	}
}

.bg-main {
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	height: 100vh;
	padding: 5%;
	background: linear-gradient(-55.33deg, rgba(227, 203, 255, 0.8) -7.008%, rgba(227, 203, 255, 0) 54.958%), linear-gradient(46.03deg, rgb(255, 243, 196) 3.538%, rgba(255, 231, 141, 0.34) 15.475%, rgba(255, 239, 175, 0.02) 39.977%, rgba(255, 239, 175, 0) 65.108%), linear-gradient(225.87deg, rgb(254, 189, 200) 2.42%, rgba(255, 197, 207, 0.32) 52.799%, rgba(255, 197, 207, 0) 85.102%);
}



.goods-block {
	/* #ifdef MP-WEIXIN */
	margin: 20rpx 20rpx;
	/* #endif */

	/* #ifdef H5 */
	margin: 20rpx 20rpx;
	/* #endif */
}

.icon-text {
	display: flex;
	justify-content: center;
	margin-bottom: 24rpx;

	.text-info {
		display: flex;
		align-items: center;
		width: 440rpx;

		.left {
			width: 108rpx;
			height: 2rpx;
			background: #D8D8D8;
		}

		.center {
			width: 128rpx;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 44rpx;
			margin-left: 48rpx;
			margin-right: 48rpx;
		}

		.right {
			width: 108rpx;
			height: 2rpx;
			background: #D8D8D8;
		}
	}
}

.category-content {
	margin-top: 20rpx;
	margin-left: 40rpx;
	margin-right: 40rpx;
	display: grid;
	grid-template-columns: auto auto auto 90rpx;

	//grid-column-gap: v-bind(ml);
	.category-item {
		width: 90rpx;
		margin-bottom: 28rpx;


		.ct-icon {
			width: 88rpx;
			height: 88rpx;
			border-radius: 88rpx;
			box-shadow: 1px 1px 20px #b9b9b9;
			border: 5px solid #b9b9b9;
		}

		.ct-text {
			margin-top: 16rpx;
			margin-left: 5px;
		}
	}

	.current {
		border: 5px solid #ff632b !important;
	}
}

.tag-bar {
	width: fit-content;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #ffffff;
	font-weight: bold;
	font-size: 30rpx;
	padding: 5rpx;
	padding-left: 50rpx;
	padding-right: 50rpx;
	margin-bottom: 10rpx;
	font-style: italic
}

.block-one {
	background-image: url("https://marubuy-oss.oss-cn-beijing.aliyuncs.com/2024/11/033d52877be5234e2182529542f7213439home_bg.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.weather {
	position: relative;
	padding: 25rpx 25rpx 25rpx;
	color: #ffffff;
}

.weather-top {
	margin-bottom: 10rpx;
	font-size: 80rpx;
	font-weight: bold;
}

.weather-desc {
	font-size: 24rpx;
	margin-left: 8rpx;
}

.weather-icon {
	position: relative;
	width: 300rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.sun {
	position: absolute;
	top: 40rpx;
	right: 80rpx;
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	background-color: #FFB75E;
}

.cloud {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 180rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.5) 100%);
	border-radius: 90rpx;
	box-shadow: 0rpx 8rpx 16rpx rgba(0,0,0,0.1);
}

.weather-bottom {
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	margin-top: 50rpx;
	color: #808080;
}

.side-menu {
	position: absolute;
	top: 50%;
	right: 20rpx;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #ffffff;
	margin-bottom: 30rpx;
	font-size: 24rpx;
}

.menu-item .iconfont {
	font-size: 40rpx;
	margin-bottom: 8rpx;
	width: 80rpx;
	height: 80rpx;
}

.poster-container {
	position: relative;
	margin-top: 50rpx;
	margin-bottom: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.poster-bg {
	position: absolute;
	width: 90%;
	height: 530rpx;
	border-radius: 30rpx;
	background-color: #ffecec;
}

.bg-back {
	transform: rotate(-8deg);
	background-color: #ffecec;
	z-index: 0;
}

.bg-middle {
	transform: rotate(10deg);
	background-color: #fffcb9;
	z-index: 1;
}

.poster-main {
	position: relative;
	width: 80%;
	height: 530rpx;
	background-color: #fff;
	border-radius: 30rpx;
	box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1);
	z-index: 2;
	overflow: hidden;
}

.poster-img {
	width: 100%;
	height: 100%;
	border-radius: 30rpx;
}

.poster-info {
	position: absolute;
	bottom: 20rpx;
	left: 20rpx;
	display: flex;
	align-items: center;
}

.poster-tag {
	background: linear-gradient(90deg, #FFB6C1, #FFA07A);
	color: #fff;
	padding: 5rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.poster-steps,
.poster-time {
	margin-left: 10rpx;
	background-color: rgba(255,255,255,0.8);
	color: #333;
	padding: 5rpx 10rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.login-btn {
	width: 70%;
	height: 90rpx;
	border-radius: 45rpx;
	display: flex;
	justify-content: center;
	margin: 40rpx auto 200rpx;
	align-items: center;
	font-size: 32rpx;
	color: #333;
	box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.08);
}

.primary-btn {
	background: linear-gradient(to right, #ffc7a6, #ffe086);
}

.secondary-btn {
	background-color: rgba(255, 255, 255, 0.5);
}

</style>
